<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { useUploadFile } from '../../store/uploadFile'
import utils from '../../utils/utils'
const uploadFileStore = useUploadFile()
const uploadUrl =  import.meta.env.VITE_APP_API_BASE_URL + import.meta.env.VITE_APP_API_PREFIX+"/uploadCollectionFile" 
const headers = {
    // 如果需要鉴权可在此添加token
    // Authorization: 'Bearer xxx'
    Authorization: localStorage.getItem('token')
}
const uploadStatus = ref({
    message: '',
    type: 'success'
})
function beforeUpload(file) {
    const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
        file.type === 'application/vnd.ms-excel'
    if (!isExcel) {
        ElMessage.error('只能上传Excel文件（.xlsx 或 .xls）')
    }
    return isExcel
}
function changeExcel(file) {
    uploadStatus.value = {
        message: '解析成功，正在导入数据...',
        type:'info'
    }
}
function handleSuccess(response) {
    if(response.code === 200){
        uploadStatus.value = {
            message: '上传成功',
            type:'success'
        }
        uploadFileStore.isOpen = false
        utils.showMessage(response.message,'success',2000)
    }
    // 这里可以根据后端返回内容进一步提示
}
function handleError() {
    uploadStatus.value = {
        message: '上传失败，请检查文件格式或稍后重试',
        type: 'error'
    }
}
</script>
<template>
    <el-dialog v-model="uploadFileStore.isOpen" title="上传文件" width="500" center>
        <el-card class="upload-card" shadow="hover">
            <div class="upload-header">
                <el-icon>
                    <UploadFilled />
                </el-icon>
                <span>上传Excel文件</span>
            </div>
            <el-upload class="upload-demo" drag :action="uploadUrl" :headers="headers" :before-upload="beforeUpload"
                :on-success="handleSuccess" :on-error="handleError" :on-change="changeExcel" :show-file-list="false"  accept=".xlsx,.xls">
                <el-icon class="el-icon--upload">
                    <UploadFilled />
                </el-icon>
                <div class="el-upload__text">
                    拖拽文件到此处，或 <em>点击上传</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        仅支持 .xlsx 或 .xls 格式的Excel文件
                    </div>
                </template>
            </el-upload>
            <el-alert v-if="uploadStatus.message" :title="uploadStatus.message" :type="uploadStatus.type" show-icon
                class="mt-3" :closable="false" />
        </el-card>
    </el-dialog>
</template>

<style scoped>
.upload-card {
    max-width: 420px;
    margin: 40px auto;
    padding: 24px 16px 16px 16px;
    border-radius: 12px;
}

.upload-header {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 18px;
    color: #409eff;
}

.upload-header .el-icon {
    margin-right: 8px;
    font-size: 22px;
}

.upload-demo {
    width: 100%;
}

.el-upload__text em {
    color: #409eff;
    font-style: normal;
    cursor: pointer;
}

.mt-3 {
    margin-top: 18px;
}
</style>